  <template>
    <template v-if="show && !isText">
      <el-select :style="{
        width: proxy.$size(width, '100%'),
      }" v-model="keyword" v-bind="{
        placeholder: optionsArr.length === 0 ? '正在加载中...' : '请选择',
        clearable: true,
        ...$attrs,
        filterable: true,
        'collapse-tags-tooltip': true,
        'max-collapse-tags': max,
        'collapse-tags': !!max,
        remote: typeof $attrs['remote-method'] === 'function',
        disabled: typeof $attrs.disabled === 'function' ? $attrs.disabled(data) : $attrs.disabled || optionsArr.length === 0
      }" @change="changeBtn" v-if="optionsArr.length <= 30">
        <el-option v-for="(item, index) in optionsArr" :key="index" :label="item[labelName]" :value="item[valueName]"
          :disabled="typeof item[disabledName] === 'function' ? item[disabledName](data, rowIndex) : item[disabledName]">
          <template #default v-if="$slots.default">
            <slot :options="item" />
          </template>
        </el-option>
      </el-select>
      <el-select-v2 :style="{
        width: proxy.$size(width, '100%'),
      }" v-model="keyword" :key="componentKey" v-bind="{
        placeholder: optionsArr.length === 0 ? '正在加载中...' : '请选择',
        clearable: true,
        ...$attrs,
        'collapse-tags-tooltip': true,
        filterable: true,
        remote: typeof $attrs['remote-method'] === 'function',
        disabled: typeof $attrs.disabled === 'function' ? $attrs.disabled(data) : $attrs.disabled || optionsArr.length === 0
      }" :props="{
        label: labelName,
        value: valueName,
        disabled: disabledName,
      }" @change="changeBtn" :options="optionsArr" v-else>
        <template #default="{ item }" v-if="$slots.default">
          <slot :options="item" />
        </template>
      </el-select-v2>
    </template>
    <TextBox :data="keyword" :options="options" :labelName="labelName" :valueName="valueName" v-else />
  </template>
<script setup lang="ts">
const { proxy } = getCurrentInstance() as any;
//获取父级数据
const props = withDefaults(
  defineProps<{
    data: any;
    dataName?: any;
    width?: string | number;
    labelName?: string; //
    valueName?: string; //
    disabledName?: string; //
    options?: any; //
    optionsName?: string;
    all?: any;//是否有全选
    isAll?: boolean;//是否有全选
    allValue?: any;//全选值
    allLabel?: any;//全选标题
    split?: string;//是否需要字符串转数组
    max?: number;//是否需要字符串转数组
    rowIndex?: number;//列表
    isText?: boolean;//文本
  }>(),
  {
    type: '',
    labelName: 'label',
    valueName: 'value',
    disabledName: 'disabled',
    optionsName: '选项',
  },
);
const show = ref(true)
const componentKey = ref(Date.now());
const keyword = computed({
  get() {
    if (props.data) {
      let _data = props.dataName ? props.data[props.dataName] : props.data
      if (props.split) {
        _data = _data ? _data.split(props.split) : []
      }
      return _data;
    } else {
      return ""
    }
  },
  set(val) {
    if (props.data) {
      if (props.dataName) {
        if (props.split) {
          props.data[props.dataName] = val.length > 0 ? val.join(props.split) : ''
        } else {
          props.data[props.dataName] = val
        }
      } else {
        if (props.split) {
          props.data = val.join(props.split)
        } else {
          props.data = val
        }
      }
    }
  },
});
const optionsArr = computed(() => {
  let _arr: any[] = []
  if (Array.isArray(props.options)) {
    _arr = props.options.map((row) => {
      if (typeof row === "object") {
        return row
      } else {
        return {
          label: row,
          value: row,
        }
      }
    })
  } else if (typeof props.options === 'number') {
    _arr = Array.from({ length: props.options }).map((_, idx) => ({
      label: `${props.optionsName}${idx + 1}`,
      value: idx + 1,
    }))
  }
  if (props.isAll) {
    let allRow: any = {}
    allRow[props.labelName] = props.allLabel || '全部'
    allRow[props.valueName] = props.allValue || props.allValue === 0 ? props.allValue : ''
    _arr.unshift(allRow)
  } else if (props.all) {
    _arr.unshift(props.all)
  }
  return _arr
});

const emit = defineEmits<{
  //fn为父组件引入子组件是定义的子组件事件属性，可随意定义
  (event: 'changeBtn', val: any, form: any, rows: any[]): void;
}>();
const changeBtn = (val: any) => {
  let rowArr: any = {}
  if (props.options && props.options.length > 0) {
    rowArr = props.options.filter((el: any) => Array.isArray(val) ? val.includes(el[proxy.valueName]) : val === el[proxy.valueName])
  }
  emit('changeBtn', val, props.data, rowArr)
};


onMounted(() => { });
</script>
<style scoped></style>
